<template>
  <div class="hc-login">
    <h1 class="title">{{ title }}</h1>
    <p class="text">专注企业服务软件定制</p>
  </div>

  <div style="margin-top: 50px">
    <el-form
      ref="formRef"
      :rules="rules"
      :label-position="labelPosition"
      :model="formLabelAlign"
      :size="size"
      style="width: 500px"
    >
      <el-form-item label="手机号码" prop="name">
        <el-input
          :prefix-icon="User"
          v-model="formLabelAlign.name"
          placeholder="请输入手机号"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="emil" class="reatvie">
        <el-input
          :prefix-icon="Message"
          v-model="formLabelAlign.emil"
          placeholder="请输入验证码"
          autocomplete="off"
        />
        <span class="emil">发送验证码</span>
      </el-form-item>
      <el-form-item label="账户密码" prop="passwrod">
        <el-input
          :prefix-icon="Lock"
          v-model="formLabelAlign.passwrod"
          placeholder="请输入密码"
          autocomplete="off"
          type="password"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPsd">
        <el-input
          type="password"
          :prefix-icon="Lock"
          v-model="formLabelAlign.confirmPsd"
          placeholder="请再次输入密码"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>

    <div class="btn">
      <el-button class="btn_t" @click="register($refs.formRef)" type="primary">{{
        btnType == 0 ? "注册" : "修改密码"
      }}</el-button>
    </div>
    <div class="txt" @click="emit('login')">已有帐号？点击去登录</div>
  </div>
</template>

<script setup>
import { reactive, ref, defineEmits, defineProps } from "vue";
import { User, Lock, Message } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
const emit = defineEmits(["login"]);
const props = defineProps({
  title: {
    type: String,
    default: "注册",
  },
  btnType: {
    type: Number,
    default: 0,
  },
});

const route = useRoute();
const router = useRouter();
const labelPosition = ref("top");
const size = ref("large");
const checked1 = ref(true);

const rules = reactive({
  emil: [
    {
      required: true,
      message: "验证码不能为空",
    },
  ],
  name: [
    {
      required: true,
      message: "用户名不能为空",
    },
  ],
  confirmPsd: [
    {
      required: true,
      message: "请再次确认密码",
    },
  ],
  passwrod: [
    {
      required: true,
      message: "密码不能为空",
    },
  ],
});

const formLabelAlign = reactive({
  emil: "",
  name: "",
  passwrod: "",
  confirmPsd: "",
});

const register = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("表单验证通过:", formLabelAlign);
    } else {
      console.log("表单验证失败");
    }
  });
};
</script>

<style lang="less" scoped>
.reatvie {
  position: relative;
}

.emil {
  color: #1e6aed;
  cursor: pointer;
  position: absolute;
  right: 10px;
}

.ore {
  font-size: 14px;
  cursor: pointer;
  color: #1e6aed;
}

.title {
  color: #1a1a1a;
  margin-bottom: 5px;
}

.text {
  color: #999999;
  font-size: 16px;
}

/deep/.el-form-item__label {
  font-size: 16px;
  color: #1a1a1a;
}

.btn {
  width: 100%;
  margin-top: 60px;
}

.btn_t {
  height: 50px;
  width: 100%;
  background-color: #1e6aed;
  font-size: 16px;
}

.txt {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  cursor: pointer;
  color: #1e6aed;
}
</style>
